<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input id="file" type="file">
</body>
<script>
    const file = document.getElementById('file')
    file.addEventListener('change', (event) => {
        const file = event.target.files[0] //获取文件信息
        const chunks = chunkFun(file)
        uploadFile(chunks)
    })


    const chunkFun = (file, size = 1024 * 1024 * 4) => {
        const chunks = []
        for (let i = 0; i < file.size; i += size) {
            chunks.push(file.slice(i, i + size))
        }
        return chunks
    }


    const uploadFile = (chunks) => {
        const List = []
        for (let i = 0; i < chunks.length; i++) {
            const formData = new FormData()
            formData.append('index', i)
            formData.append('total', chunks.length)
            formData.append('fileName', 'xiezhen')
            formData.append('file', chunks[i])
            List.push(fetch('http://127.0.0.1:3000/up', {
                method: 'POST',
                body: formData
            }))
        }
        Promise.all(List).then(res => {
            fetch('http://127.0.0.1:3000/merge', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    fileName: '大文件',
                })
            }).then(res => {
                console.log(res)
            })
        })
    }

</script>

</html>